<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Shopping Cart</title>
        <link rel="stylesheet" href="shopping.css" />
    </head>
    <body>
        <div class="box">
            <div class="header">
                <div class="title">购物清单</div>
            </div>
            <div class="shop-bar">
                <div class="chooes bg-grey">
                    <input
                        type="checkbox"
                        id="checkAll"
                        style="width: 20px; height: 20px"
                    /><span>&nbsp;全选</span>
                </div>
                <div class="goods-title bg-grey"><span>商品</span></div>
                <div class="count bg-grey">数量</div>
                <div class="price bg-grey">单价(元)</div>
                <div class="total-price bg-grey">总价(元)</div>
                <div class="controls bg-grey">操作</div>
            </div>
            <div class="shop-car">
                <ul class="goods-list" id="goodsList">
                    <li class="goods" >
                        <div class="box1">
                            <div class="chooes">
                                <input type="checkbox" class="check" />
                            </div>
                            <div class="goods-detail">
                                <img
                                    class="goods-img"
                                    src="images/凄惨红4060.png"
                                />
                                <div class="goods-content">
                                    <span class="title">凄惨红4060</span><br />
                                    <span class="detail">
                                        品牌:七彩虹 产地:中国<br />
                                        规格:8pin x 1<br />
                                        建议电源:550w
                                    </span>
                                </div>
                            </div>
                            <div class="goods-num">
                                <div class="sub">-</div>
                                <div class="num">1</div>
                                <div class="add">+</div>
                            </div>
                            <div class="goods-price">
                                <span>￥</span>
                                <span class="price">800.00</span>
                            </div>
                            <div class="goods-total-price">
                                <span>￥</span>
                                <span class="total-price">800.00</span>
                            </div>
                            <div class="goods-controls">
                                <span class="del">删除</span>
                            </div>
                        </div>
                    </li>
                    <li class="goods">
                        <div class="box1">
                            <div class="chooes">
                                <input type="checkbox" class="check" />
                            </div>
                            <div class="goods-detail">
                                <img
                                    class="goods-img"
                                    src="images/华硕天选4060.png"
                                />
                                <div class="goods-content">
                                    <span class="title">华硕天选4060</span
                                    ><br />
                                    <span class="detail">
                                        品牌:华硕 产地:中国台湾<br />
                                        规格:8pin x 1<br />
                                        建议电源:600w
                                    </span>
                                </div>
                            </div>
                            <div class="goods-num">
                                <div class="sub">-</div>
                                <div class="num">1</div>
                                <div class="add">+</div>
                            </div>
                            <div class="goods-price">
                                <span>￥</span>
                                <span class="price">1000.00</span>
                            </div>
                            <div class="goods-total-price">
                                <span>￥</span>
                                <span class="total-price">1000.00</span>
                            </div>
                            <div class="goods-controls">
                                <span class="del">删除</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="under">
                <div class="del-all" id="delAll">删除所有商品</div>
                <div class="settle">
                    <div class="price">
                        <span class="num">0</span>
                        件商品总计（不含运费）:
                        <span style="color: #ec4826; font-size: 20px">￥</span>
                        <span class="total-price">0.00</span>
                    </div>
                    <div class="go-settle">去结算</div>
                </div>
            </div>
        </div>
        <script src="shopping.js"></script>
    </body>
</html>
